<template>
	<view class="content">
		<view class="tabbar">
			<image class="bg" src="../../static/index-bg.png" mode="aspectFill"></image>
			<view class="item" v-for="(item, idx) in tabbar" :key="item.id" @click="tabChange(idx)">
				<image :src="tabIdx == idx ? item.activeIcon : item.icon" mode="aspectFit"></image>
				<text :style="{color: tabIdx == idx ? '#3D99BB' : '#999999'}">{{item.title}}</text>
			</view>
			<image class="btn" src="../../static/mid-btn.png" mode="aspectFit" @click="gotoPage"></image>
		</view>

		<!-- 首页 -->
		<home v-show="tabIdx == 0" ref="home"></home>

		<!-- 用户 -->
		<user v-show="tabIdx == 1" ref="user"></user>
	</view>
</template>

<script>
	import Home from './home.vue'
	import User from './user.vue'

	export default {
		components: { Home, User },
		data() {
			return {
				tabbar: [{
						id: 1,
						title: '首页',
						icon: '../../static/home.png',
						activeIcon: '../../static/home-active.png',
					},
					{
						id: 2,
						title: '我的',
						icon: '../../static/user.png',
						activeIcon: '../../static/user-active.png',
					}
				],
				tabIdx: 0
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			if (this.tabIdx == 0) {
				this.$refs.home.getList(true)
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.tabIdx == 0) {
				this.$refs.home.getList()
			}
		},
		methods: {
			tabChange(idx) {
				this.tabIdx = idx
			},

			gotoPage() {
				this.$u.vuex('vuex_evaluate', {
					supervision_time: '',
					scene_id: '',
					evaluation_sheet_id: '',
					evaluation_unit_id: '',
					type: '',
					mark: '',
					data: ''
				})
				uni.navigateTo({
					url: '/pagesA/choose-scene/choose-scene'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 200rpx;

		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			z-index: 100;
			// background-image: url(../../static/logo.png);
			// background-position: bottom;
			// background-size: 750rpx 100rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-around;
			align-items: center;
			
			.bg {
				position: absolute;
				bottom: 0;
				left: 0px;
				width: 750rpx;
				height: 98rpx;
				z-index: -1;
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 52rpx;
					height: 52rpx;
				}

				text {
					font-size: 22rpx;
				}
			}

			.btn {
				position: absolute;
				bottom: 62rpx;
				width: 150rpx;
				height: 150rpx;
				padding-left: 6rpx;
				margin: 0 auto;
				transform: scale(1);
				transition: transform 0.1s linear;

				&:active {
					transform: scale(0.9)
				}
			}
		}
	}
</style>
